<template>
	<view>
		<view class="easy_select" @click.stop="trigger(index)" v-for="(val,index) in areaListAll" :key='index'> 
			<input type="text" v-model="gencyArea[index]" :placeholder="placeholder" disabled clearable>
			<view class="select_right">
				<image class="dropdown_img" src="../../static/images/dropdown.png"></image>
			</view>    
			<!-- 子元素 -->
			<view class="child_select" v-show="isShowSelect[index]" > 
				<view class="child_select_item" @click="changeSelect(item,index)" v-for="item in areaListAll[index]" :key='item.value'>{{item.label}}</view>  
			</view>  
		</view> 
	</view>
</template>

<script>
	export default {
		props: {
			placeholder:{
				type: String,
				default: '请选择' 
			}, 
			areaListAll:{
				type: Array,
				default: () => []
			},
			gencyArea:{
				type: Array,
				default: () => []
			},
			areaListQuantity:{
				type:Number,
				default: 1
			},
			cityList:{
				type: Array,
				default:[]
			},
			options: {
				type: Array,
				default () {
					return [{
						value: '选项1',
						label: '黄金糕'
					}, {
						value: '选项2',
						label: '双皮奶'
					}, {
						value: '选项3',
						label: '蚵仔煎'
					}, {
						value: '选项4',
						label: '龙须面'
					}, {
						value: '选项5',
						label: '北京烤鸭'
					}]
				}
			}
		},
		data() {
			return {
				// 是否展示选择框 
				isShowSelect:[false,false]
			}
		}, 
		mounted() {
		
		},
		methods: {
			// 点击显示隐藏
			trigger(index){
				let newIsShowSelect = JSON.parse(JSON.stringify(this.isShowSelect));  
				newIsShowSelect[index] = !newIsShowSelect[index]
				this.isShowSelect = newIsShowSelect 
			},
			changeSelect(item,index){     
				this.$emit('changeSelect',item,index)
			}
		}, 
	} 
</script>

<style scoped lang="less">
	.easy_select {
		margin: 20rpx 0;
		display: flex;
		justify-content: space-around;
		 flex-wrap: wrap;
		position: relative;
		border: 1px solid #dcdfe6;
		border-radius: 4px; 
		color: #606266;
		outline: none;
		box-sizing: content-box;
		height: 30px;
		input {
			width: 400rpx;
			padding: 0 18rpx; 
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			height: 100% !important;
			min-height: 100% !important;
		}
		.select_right{
			margin: auto 0;
			width: 40rpx;
			height: 40rpx;
			.dropdown_img{
				width: 100%;
				height: 100%;
			}
		}
		.child_select{ 
			width: 100%;
			padding: 6px 0;
			margin-top: 10px;
			border: 1px solid #e4e7ed;
			border-radius: 10rpx;
			background-color: #fff;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
			box-sizing: border-box;
			transform-origin: center top; 
			overflow: scroll; 
			max-height: 360rpx;
			z-index: 100;
			.child_select_item{
				padding: 0 20rpx; 
				white-space: nowrap;
				font-size: 14px;
				color: #606266;
				height: 60rpx;
				line-height: 60rpx;
				box-sizing: border-box;
				
			}
		}
	}

	 
</style>
